<script setup lang="ts">
import * as THREE from 'three';

import { onBeforeMount, onBeforeUnmount, onMounted, ref } from 'vue';

import { Engine, Scene, FreeCamera, Vector3, MeshBuilder, HemisphericLight } from '@babylonjs/core';

const bjsCanvas = ref<HTMLCanvasElement | null>(null);
import * as TWEEN from 'three/examples/jsm/libs/tween.module.js'

import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";

const threeContainer = ref<HTMLDivElement>();

let scene: any = null;
let renderer: any = null;
let cube: any = null;
let camera: any = null;
let controls: any = null

function initThree() {
  // 创建场景  
  scene = new THREE.Scene();

  // 创建相机  
  camera = new THREE.PerspectiveCamera(
    45,
    threeContainer.value!.clientWidth / threeContainer.value!.clientHeight,
    0.9,
    1000
  );
  camera.position.y = 20;
  camera.position.z = 100;
  // 创建渲染器  
  renderer = new THREE.WebGLRenderer({ alpha: true });
  renderer.setSize(threeContainer.value!.clientWidth, threeContainer.value!.clientHeight);
  renderer.setClearAlpha(0);
  threeContainer.value?.appendChild(renderer.domElement);
  controls = new OrbitControls(camera, renderer.domElement)
  controls.maxDistance = 300;
  scene.add(controls);

  let geometry = new THREE.BoxGeometry(30, 40, 10);
  const material = new THREE.MeshBasicMaterial({ color: 0x00ff00, side: THREE.DoubleSide,wireframe:false });
  cube = new THREE.Mesh(geometry, material);
  cube.name = 'geometry'
  cube.position.set(-35, 20, -40)
  scene.add(cube);
  let geometry1 = new THREE.BoxGeometry(15, 40, 15);
  let material1 = new THREE.MeshBasicMaterial({ color: 0xffff00, side: THREE.DoubleSide });
  let cube1 = new THREE.Mesh(geometry1, material1);
  cube1.name = 'geometry1'
  cube1.position.set(-40, 20, 10)
  scene.add(cube1);
  let geometry2 = new THREE.BoxGeometry(0, 20, 20);
  let material2 = new THREE.MeshBasicMaterial({ color: '#9370DB', side: THREE.DoubleSide });
  let cube2 = new THREE.Mesh(geometry2, material2);
  cube2.position.set(40, 10, 10)
  scene.add(cube2);
  let material3 = new THREE.MeshBasicMaterial({ color: '#cc9966', side: THREE.DoubleSide, });
  let geometry3 = new THREE.BoxGeometry(20, 20, 20);
  let cube3 = new THREE.Mesh(geometry3, material3);
  cube3.name = 'geometry3'
  cube3.position.set(0, 11, -11)
  scene.add(cube3);
  let material4 = new THREE.MeshBasicMaterial({ color: '#663399', side: THREE.DoubleSide });
  let geometry4 = new THREE.BoxGeometry(20, 20, 20);
  let cube4 = new THREE.Mesh(geometry4, material4);
  cube4.position.set(10, 10, 10)
  scene.add(cube4);
  // let material5 = new THREE.MeshBasicMaterial({ color: '#663399', side: THREE.DoubleSide });
  // let geometry5 = new THREE.BoxGeometry(5, 5, 5);
  // let cube5 = new THREE.Mesh(geometry5, material5);
  // cube5.position.set(10, 2, 10)
  // scene.add(cube5);
  // let textureLoader = new THREE.TextureLoader();
  let cubeMaterial: any = new THREE.MeshBasicMaterial({ color: '#EEEEEE', transparent: true, side: THREE.DoubleSide });
  let planeGeometry = new THREE.PlaneGeometry(200, 200);
  let plane = new THREE.Mesh(planeGeometry, cubeMaterial);
  plane.rotation.x = -0.5 * Math.PI;
  // plane.position.x = 0;
  // plane.position.z = 0;
  plane.name = 'planeGeometry'
  scene.add(plane)

  modul()
};
let planeArr = []
function modul() {

  let num = 0
  for (let i = 0; i < 7; i++) {
    let cubeMaterial: any = 'cubeMaterial' + i
    let planeGeometry: any = 'planeGeometry' + i
    let name = 'planeGeometry' + (i + 1)
    let plane: any = 'plane' + i
    num += 5
    let color = getRandomColor()
    planeGeometry = new THREE.PlaneGeometry(30, 10);
    cubeMaterial = new THREE.MeshBasicMaterial({ color: color, transparent: true, side: THREE.DoubleSide });
    plane = new THREE.Mesh(planeGeometry, cubeMaterial);
    plane.rotation.x = -0.5 * Math.PI;
    plane.position.x = -35;
    plane.position.y = num;
    plane.position.z = -40
    plane.name = name
    scene.add(plane)
  }

}

function getRandomColor() {
  let color = "#";
  for (let i = 0; i < 6; i++) {
    color += Math.floor(Math.random() * 16).toString(16);
  }
  return color;
}

// 创建射线投射器
const raycaster = new THREE.Raycaster()


window.addEventListener("resize", () => {
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setPixelRatio(window.devicePixelRatio);
});

const mouse = new THREE.Vector2();

window.addEventListener("click", (event: any) => {


  mouse.x = (event.clientX / window.innerWidth) * 2 - 1
  mouse.y = -((event.clientX / window.innerWidth) * 2 - 1)
  raycaster.setFromCamera(mouse, camera)
  const intersects: any = raycaster.intersectObjects(scene.children, false)
  const selectedObject = intersects[0].object


  if (intersects.length > 0) {
    console.log(selectedObject.name);
    if (selectedObject.name == 'geometry') {
      geometryDown()

    }

  }
});


const animate = () => {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
  // camera.updateProjectionMatrix();
  // 更新动画
  TWEEN.update()
};

function down() {
  const geometry = new TWEEN.Tween({ x: 0, y: 20, z: 100, tx: 0, ty: 0, tz: 0, }).to({ x: -50, y: 39, z: -40, tx: 0, ty: 39, tz: -35, }, 3000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
  const planeGeometry7 = new TWEEN.Tween({ x: -50, y: 39, z: -40, tx: 0, ty: 39, tz: -35, }).to({ x: -50, y: 33, z: -40, tx: 0, ty: 29, tz: -35, }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
  const planeGeometry6 = new TWEEN.Tween({ x: -50, y: 33, z: -40, tx: 0, ty: 29, tz: -35 }).to({ x: -50, y: 28, z: -40, tx: 0, ty: 24, tz: -35 }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
  const planeGeometry5 = new TWEEN.Tween({ x: -50, y: 28, z: -40, tx: 0, ty: 24, tz: -35 }).to({ x: -50, y: 23, z: -40, tx: 0, ty: 20, tz: -35 }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
  const planeGeometry4 = new TWEEN.Tween({ x: -50, y: 23, z: -40, tx: 0, ty: 20, tz: -35 }).to({ x: -50, y: 19, z: -40, tx: 0, ty: 15, tz: -35 }, 3000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
  const planeGeometry3 = new TWEEN.Tween({ x: -50, y: 19, z: -40, tx: 0, ty: 15, tz: -35 }).to({ x: -50, y: 13, z: -40, tx: 0, ty: 10, tz: -35 }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
  const planeGeometry2 = new TWEEN.Tween({ x: -50, y: 13, z: -40, tx: 0, ty: 10, tz: -35 }).to({ x: -50, y: 9, z: -40, tx: 0, ty: 7, tz: -35 }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
  const planeGeometry1 = new TWEEN.Tween({ x: -50, y: 9, z: -40, tx: 0, ty: 7, tz: -35 }).to({ x: -50, y: 5, z: -40, tx: 0, ty: 5, tz: -35 }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })





  geometry.chain(planeGeometry7)
  planeGeometry7.chain(planeGeometry6)
  planeGeometry6.chain(planeGeometry5)
  planeGeometry5.chain(planeGeometry4)
  planeGeometry4.chain(planeGeometry3)
  planeGeometry3.chain(planeGeometry2)
  planeGeometry2.chain(planeGeometry1)
  // planeGeometry1.chain(geometry)



  geometry.start()

  const group = new TWEEN.Group()
  group.add(geometry)
  group.add(planeGeometry7)
  group.add(planeGeometry6)
  group.add(planeGeometry5)
  group.add(planeGeometry4)
  group.add(planeGeometry3)
  group.add(planeGeometry2)
  group.add(planeGeometry1)
}

function geometryDown() {
  const geometry = new TWEEN.Tween({ x: 0, y: 20, z: 100, tx: 0, ty: 0, tz: 0, }).to({ x: -80, y: 39, z: -40, tx: 0, ty: 39, tz: -35, }, 3000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
    const geometry1 = new TWEEN.Tween({ x: -80, y: 39, z: -40, tx: 0, ty: 39, tz: -35, }).to({ x: -50, y: 39, z: -40, tx: 0, ty: 39, tz: -35, }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
    const geometry2 = new TWEEN.Tween({ x: -50, y: 39, z: -40, tx: 0, ty: 39, tz: -35, }).to({ x: -50, y: 39, z: -38, tx: 0, ty: 39, tz: -35, }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
    const geometry3 = new TWEEN.Tween({ x: -50, y: 39, z: -38, tx: 0, ty: 39, tz: -35, }).to({ x: -25, y: 39, z: -38, tx: 0, ty: 39, tz: -35, }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
    const geometry4= new TWEEN.Tween({ x: -25, y: 39, z: -38, tx: -30, ty: 39, tz: -40, }).to({ x: -25, y: 39, z: -42, tx: -80, ty: 39, tz: -40, }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
    const geometry5= new TWEEN.Tween({ x: -25, y: 39, z: -42, tx: -80, ty: 39, tz: -40, }).to({ x: -50, y: 39, z: -42, tx: -40, ty: 39, tz: -40, }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
    const geometry6= new TWEEN.Tween({ x: -50, y: 39, z: -42, tx: -40, ty: 39, tz: -40, }).to({ x: -50, y: 39, z: -40, tx: -40, ty: 39, tz: -40, }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
    const geometry7= new TWEEN.Tween({ x: -50, y: 39, z: -40, tx: -40, ty: 39, tz: -40, }).to({ x: -80, y: 39, z: -40, tx: -40, ty: 39, tz: -40, }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
    const geometry8= new TWEEN.Tween({ x: -80, y: 39, z: -40, tx: -40, ty: 39, tz: -40, }).to({ x: -80, y: 33, z: -42, tx: 0, ty: 29, tz: -35, }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
    const geometry9= new TWEEN.Tween({ x: -80, y: 33, z: -42, tx: 0, ty: 33, tz: -35, }).to({ x: -50, y: 33, z: -42, tx: 0, ty: 33, tz: -35, }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
    const geometry10= new TWEEN.Tween({  x: -50, y: 33, z: -42, tx: 0, ty: 33, tz: -35, }).to({ x: -50, y: 33, z: -38, tx: 0, ty: 33, tz: -35, }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
    const geometry11= new TWEEN.Tween({ x: -50, y: 33, z: -38, tx: 0, ty: 33, tz: -35, }).to({ x: -25, y: 33, z: -38, tx: 0, ty: 33, tz: -35 }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
    const geometry12= new TWEEN.Tween({ x: -25, y: 33, z: -38, tx: -30, ty: 33, tz: -40, }).to({ x: -25, y: 33, z: -42, tx: -80, ty: 33, tz: -40, }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
    const geometry13= new TWEEN.Tween({ x: -25, y: 33, z: -42, tx: -80, ty: 33, tz: -40, }).to({ x: -50, y: 33, z: -42, tx: -50, ty: 33, tz: -40, }, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
    const geometry14= new TWEEN.Tween({ x: -50, y: 33, z: -42, tx: -40, ty: 33, tz: -40,}).to({ x: -50, y: 33, z: -40, tx: 0, ty: 33, tz: -40,}, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
    const geometry15= new TWEEN.Tween({ x: -50, y: 33, z: -40, tx: 0, ty: 33, tz: -40,}).to({ x: -50, y: 33, z: -39, tx: 0, ty: 33, tz: -40,}, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
    const geometry16= new TWEEN.Tween({ x: -50, y: 33, z: -38, tx: 0, ty: 33, tz: -40,}).to({ x: -80, y: 33, z: -38, tx: 0, ty: 33, tz: -40,}, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
    //--------
    const geometry17= new TWEEN.Tween({ x: -80, y: 33, z: -38, tx: 0, ty: 33, tz: -40,}).to({ x: -80, y: 28, z: -38, tx: 0, ty: 33, tz: -40,}, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
    const geometry18= new TWEEN.Tween({ x: -80, y: 33, z: -38, tx: 0, ty: 33, tz: -40,}).to({ x: -80, y: 28, z: -38, tx: 0, ty: 33, tz: -40,}, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
    const geometry19= new TWEEN.Tween({ x: -80, y: 33, z: -38, tx: 0, ty: 33, tz: -40,}).to({ x: -80, y: 28, z: -38, tx: 0, ty: 33, tz: -40,}, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
    const geometry20= new TWEEN.Tween({ x: -80, y: 33, z: -38, tx: 0, ty: 33, tz: -40,}).to({ x: -80, y: 28, z: -38, tx: 0, ty: 33, tz: -40,}, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
    const geometry21= new TWEEN.Tween({ x: -80, y: 33, z: -38, tx: 0, ty: 33, tz: -40,}).to({ x: -80, y: 28, z: -38, tx: 0, ty: 33, tz: -40,}, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
    const geometry22= new TWEEN.Tween({ x: -80, y: 33, z: -38, tx: 0, ty: 33, tz: -40,}).to({ x: -80, y: 28, z: -38, tx: 0, ty: 33, tz: -40,}, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
    const geometry23= new TWEEN.Tween({ x: -80, y: 33, z: -38, tx: 0, ty: 33, tz: -40,}).to({ x: -80, y: 28, z: -38, tx: 0, ty: 33, tz: -40,}, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })
    const geometry24= new TWEEN.Tween({ x: -80, y: 33, z: -38, tx: 0, ty: 33, tz: -40,}).to({ x: -80, y: 28, z: -38, tx: 0, ty: 33, tz: -40,}, 1000)
    .onUpdate(function (obj) {
      camera.position.set(obj.x, obj.y, obj.z);
      camera.lookAt(obj.tx, obj.ty, obj.tz);
    })

    // const planeGeometry8 = new TWEEN.Tween({ x: -50, y: 39, z: -40, tx: 0, ty: 39, tz: -35, }).to({ x: -50, y: 33, z: -40, tx: 0, ty: 29, tz: -35, }, 1000)
    // .onUpdate(function (obj) {
    //   camera.position.set(obj.x, obj.y, obj.z);
    //   camera.lookAt(obj.tx, obj.ty, obj.tz);
    // })
  // const planeGeometry7 = new TWEEN.Tween({ x: -50, y: 39, z: -40, tx: 0, ty: 39, tz: -35, }).to({ x: -50, y: 33, z: -40, tx: 0, ty: 29, tz: -35, }, 1000)
  //   .onUpdate(function (obj) {
  //     camera.position.set(obj.x, obj.y, obj.z);
  //     camera.lookAt(obj.tx, obj.ty, obj.tz);
  //   })
  // const planeGeometry6 = new TWEEN.Tween({ x: -50, y: 33, z: -40, tx: 0, ty: 29, tz: -35 }).to({ x: -50, y: 28, z: -40, tx: 0, ty: 24, tz: -35 }, 1000)
  //   .onUpdate(function (obj) {
  //     camera.position.set(obj.x, obj.y, obj.z);
  //     camera.lookAt(obj.tx, obj.ty, obj.tz);
  //   })
  // const planeGeometry5 = new TWEEN.Tween({ x: -50, y: 28, z: -40, tx: 0, ty: 24, tz: -35 }).to({ x: -50, y: 23, z: -40, tx: 0, ty: 20, tz: -35 }, 1000)
  //   .onUpdate(function (obj) {
  //     camera.position.set(obj.x, obj.y, obj.z);
  //     camera.lookAt(obj.tx, obj.ty, obj.tz);
  //   })
  // const planeGeometry4 = new TWEEN.Tween({ x: -50, y: 23, z: -40, tx: 0, ty: 20, tz: -35 }).to({ x: -50, y: 19, z: -40, tx: 0, ty: 15, tz: -35 }, 3000)
  //   .onUpdate(function (obj) {
  //     camera.position.set(obj.x, obj.y, obj.z);
  //     camera.lookAt(obj.tx, obj.ty, obj.tz);
  //   })
  // const planeGeometry3 = new TWEEN.Tween({ x: -50, y: 19, z: -40, tx: 0, ty: 15, tz: -35 }).to({ x: -50, y: 13, z: -40, tx: 0, ty: 10, tz: -35 }, 1000)
  //   .onUpdate(function (obj) {
  //     camera.position.set(obj.x, obj.y, obj.z);
  //     camera.lookAt(obj.tx, obj.ty, obj.tz);
  //   })
  // const planeGeometry2 = new TWEEN.Tween({ x: -50, y: 13, z: -40, tx: 0, ty: 10, tz: -35 }).to({ x: -50, y: 9, z: -40, tx: 0, ty: 7, tz: -35 }, 1000)
  //   .onUpdate(function (obj) {
  //     camera.position.set(obj.x, obj.y, obj.z);
  //     camera.lookAt(obj.tx, obj.ty, obj.tz);
  //   })
  // const planeGeometry1 = new TWEEN.Tween({ x: -50, y: 9, z: -40, tx: 0, ty: 7, tz: -35 }).to({ x: -50, y: 5, z: -40, tx: 0, ty: 5, tz: -35 }, 1000)
  //   .onUpdate(function (obj) {
  //     camera.position.set(obj.x, obj.y, obj.z);
  //     camera.lookAt(obj.tx, obj.ty, obj.tz);
  //   })

  geometry.chain(geometry1)
  geometry1.chain(geometry2)
  geometry2.chain(geometry3)
  geometry3.chain(geometry4)
  geometry4.chain(geometry5)
  geometry5.chain(geometry6)
  geometry6.chain(geometry7)
  geometry7.chain(geometry8)
  geometry8.chain(geometry9)
  geometry9.chain(geometry10)
  geometry10.chain(geometry11)
  geometry11.chain(geometry12)
  geometry12.chain(geometry13)
  geometry13.chain(geometry14)
  geometry14.chain(geometry15)
  geometry15.chain(geometry16)
  geometry16.chain(geometry17)
  geometry17.chain(geometry18)
  geometry18.chain(geometry19)
  geometry19.chain(geometry20)
  geometry20.chain(geometry21)
  geometry21.chain(geometry22)
  geometry22.chain(geometry23)
  geometry23.chain(geometry24)
  // geometry24.chain(geometry25)
  // geometry25.chain(geometry26)
  // geometry26.chain(geometry27)
  // geometry27.chain(geometry28)
  // geometry28.chain(geometry29)
  // geometry29.chain(geometry30)
  // geometry30.chain(geometry31)
  // geometry31.chain(geometry32)
  // geometry32.chain(geometry33)
  // geometry33.chain(geometry34)
  // geometry34.chain(geometry35)
  // geometry35.chain(geometry36)
  // geometry36.chain(geometry15)
  

  // geometry6.chain(geometry7)
  geometry.start()

  const group = new TWEEN.Group()
  group.add(geometry)
  group.add(geometry1)
  group.add(geometry2)
  group.add(geometry3)
  group.add(geometry4)
  group.add(geometry5)
  group.add(geometry6)
  group.add(geometry7)
  group.add(geometry8)
  group.add(geometry9)
  group.add(geometry10)
  group.add(geometry11)
  group.add(geometry12)
  group.add(geometry13)
  group.add(geometry14)
  group.add(geometry15)
  group.add(geometry16)
  group.add(geometry17)
  group.add(geometry18)
  group.add(geometry19)
  group.add(geometry20)
  group.add(geometry21)
  group.add(geometry22)
  group.add(geometry23)
  group.add(geometry24)
  // group.add(geometry25)
  // group.add(geometry26)
  // group.add(geometry27)
  // group.add(geometry28)
  // group.add(geometry29)

  // group.add(geometry12)
  // group.add(geometry12)
  // group.add(planeGeometry8)
  // group.add(planeGeometry6)
  // group.add(planeGeometry5)
  // group.add(planeGeometry4)
  // group.add(planeGeometry3)
  // group.add(planeGeometry2)
  // group.add(planeGeometry1)

}
const dby = () => {
  if (bjsCanvas.value) {
    const engine = new Engine(bjsCanvas.value, true);
    const scene = new Scene(engine);

    // 创建相机  
    const camera = new FreeCamera('camera1', new Vector3(0, 5, -10), scene);
    camera.setTarget(Vector3.Zero());
    camera.attachControl(bjsCanvas.value, true);

    // 创建灯光  
    const light = new HemisphericLight('light', new Vector3(0, 1, 0), scene);
    light.intensity = 0.7;

    // 创建地面和球体  
    const ground = MeshBuilder.CreateGround('ground', { width: 6, height: 6 }, scene);
    const sphere = MeshBuilder.CreateSphere('sphere', { diameter: 2, segments: 32 }, scene);
    sphere.position.y = 1;

    // 运行渲染循环  
    engine.runRenderLoop(() => {
      scene.render();
    });

    // 窗口大小变化时调整引擎大小  
    window.addEventListener('resize', () => {
      engine.resize();
    });
  }
}
onMounted(() => {
  initThree();
  animate();

});
onBeforeUnmount(() => {

});
</script>
<template>
  <div ref="threeContainer" class="three-container"></div>
</template>
<style scoped>
.three-container {
  width: 100%;
  height: 100%;
  /* 或者你想要的高度 */
  overflow: hidden;
}
</style>